<template>
    <div id="app" :class="isBlogger ? 'transi-margin' : ''" @click="onApp">
        <template v-if="$route.meta.bloggerBtn !== 'hidden'">
            <div class="headband"></div>
            <!-- 博主信息 -->
            <Blogger :isBlogger="isBlogger" />
            <!-- 页面上的小按钮 -->
            <div class="blogger-btn">
                <BloggerBtn :isBlogger.sync="isBlogger" />
            </div>
        </template>

<!--        内容-->
        <router-view />
    </div>
</template>

<script>
import BloggerBtn from '@/components/BloggerBtn'

import Cache from '@/utils/cache'
import constant from '@/utils/constant'
const { CACHE_VISIT_VISIT, CACHE_VISIT_UV, CACHE_WEB_SITE } = constant

const cacheL = new Cache()
cacheL.setCacheType = 'localStorage'

import moment from 'moment'

import { saveVisit, saveUV, getWebsiteInfo } from '@/api/app'

import storeConstant from "./store/storeConstant";
import { mapMutations } from 'vuex'
const { WEB_SITE_MUTATION } = storeConstant

export default {
    components: {
        Blogger: () => import('@/components/Blogger'),
        BloggerBtn,
    },
    data() {
        return {
            isBlogger: false,
        }
    },
    created() {
        this.getFingerprint()
        this.getWebsiteInfoFn()
    },
    methods: {
        ...mapMutations([
            WEB_SITE_MUTATION, // 保存网站信息
        ]),
        // 获取网站信息
        getWebsiteInfoFn () {
            cacheL.getCache(CACHE_WEB_SITE, async (dataCache) => {
                if (dataCache) {
                    this[WEB_SITE_MUTATION](dataCache)
                } else {
                    let { result } = await getWebsiteInfo()
                    let time = 24 * 60 * 60 * 1000
                    cacheL.setCache(CACHE_WEB_SITE, result, time)
                    this[WEB_SITE_MUTATION](result)
                }
            })
        },
        // 获取浏览器指纹
        getFingerprint () {
            // FingerprintJS 这个包用cdn引入了
            const fpPromise = FingerprintJS.load()
            fpPromise
                .then(fp => fp.get())
                .then(result => {
                    const visitorId = result.visitorId

                    this.setUV(visitorId)
                    this.setVisit(visitorId)
                })
        },
        // 发送访客数 (24h 只保存一次)
        async setUV (visitorId) {
            // 当天第一次访问 (按照00:00开始)
            if (!cacheL.getCache(CACHE_VISIT_UV)) {
                // 获取今天最后的时间
                let dayEnd = moment().endOf('day').valueOf()
                let timeStamp = new Date().valueOf()

                // 缓存 明天重置
                cacheL.setCache(CACHE_VISIT_UV, CACHE_VISIT_UV, dayEnd - timeStamp)
                // 请求接口
                await saveUV(visitorId)
            }
        },
        // 发送访站数 （浏览器指纹改后，会造成数据不精准）
        async setVisit (visitorId) {
            if (!cacheL.getCache(CACHE_VISIT_VISIT)) {
                // 缓存
                cacheL.setCache(CACHE_VISIT_VISIT, CACHE_VISIT_VISIT)
                // 请求接口
                await saveVisit(visitorId)
            }
        },
        onApp() {
            if(this.isBlogger) {
                this.isBlogger = false;
            }
        },
    },
}
</script>

<style>
#app {
    font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    /* color: #2c3e50; */
    height: 100%;
    transition: all .3s ease-in-out;
    overflow-x: hidden
}

#nav {
    padding: 30px;
}

#nav a {
    font-weight: bold;
    /* color: #2c3e50; */
}

#nav a.router-link-exact-active {
    /* color: #42b983; */
}

.transi-margin {
    padding-left: 320px;
}

.headband {
    height: 3px;
    background-color: #222;
}

.blogger-btn {
    position: fixed;
    left: 40px;
    top: 50px;
}
</style>
